<template>
    <div id="silder-left">
        <div class="list-left" :style="{ height: leftHeight, width: leftWidth }">
            <div class="list-heard">
                <!-- 插槽 标题参数 -->
                <slot name="ltitle"></slot>
            </div>
            <div class="list-left-div">
                <yh-input :placeholder="placeholders" :value="leftInput" style="width: calc(100% - 30px)" @input="onchaninput" size="mini"></yh-input>
                <el-button class="left-p" type="primary" icon="el-icon-search" @click="submitInput"> </el-button>
            </div>
            <div class="left-tree" v-show="treeData">
                <el-tree
                    class="filter-tree"
                    :node-key="nodeKey"
                    :data="treeData"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                    :default-expanded-keys="defaultExpandedKeys"
                    :current-node-key="currentKey"
                    highlight-current
                    ref="tree"
                    v-loading="loading"
                >
                    <!-- :default-checked-keys="defaultCheckedKeys" -->
                    <span slot-scope="{ node }">
                        <span :title="node.label">{{ node.label }}</span>
                    </span>
                </el-tree>
            </div>
            <!-- 内容插槽 -->
            <slot></slot>
        </div>
        <div class="move-btn" v-move-crosswise></div>
    </div>
</template>
<script lang="ts">
import { Component, Emit, Model, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({
    name: 'RiskLeftModule',
})
export default class RiskLeftModule extends Vue {
    // 定义按钮给父组件使用
    @Emit('on-submit')
    private submitInput(): void {
        // (this.$refs as any).tree.filter(this.leftInput);
    }

    // 定义输入框传值
    @Model('changeUserName', { type: String })
    leftInput!: string;

    // 输入框的值
    @Emit('changeUserName')
    private onchaninput(e: any) {
        let filtration = this.$refs.tree as { filter?: any };
        filtration.filter(e);
    }

    // 输入框提示
    @Prop({ default: '请输入' }) placeholders!: string;

    @Prop({ default: false }) loading!: boolean;

    // 总高度
    @Prop() leftHeight!: string;

    // 总宽度
    @Prop() leftWidth!: string;

    // tree的数据
    @Prop() treeData!: any;

    // 默认展开项
    @Prop() defaultExpandedKeys: any[];

    // // 默认选中项
    // @Prop() defaultCheckedKeys: any[];

    // 默认选中项
    @Prop() currentKey: string;

    // 默认唯一键
    @Prop({ default: 'id' }) readonly nodeKey!: string;

    // 过滤
    private filterNode(value: string, data: { label: string }, node: any) {
        if (!value || (node.level == 1 && data.hasOwnProperty('children'))) return true;
        return data.label.indexOf(value) !== -1;
    }

    // tree按钮事件
    @Emit('on-handleNode')
    public handleNodeClick(data: any): any {}
}
</script>
<style lang="scss" scoped>
.list-left {
    height: 100vh;
    /*  width: 221px; */
    border: 1px solid #cacaca;

    .list-heard {
        width: 100%;
        height: 34px;
        background: #e5e8eb;
        border: 1px solid #cacaca;
        padding-left: 10px;
        line-height: 34px;
        color: #222;
    }

    .list-left-div {
        width: 100%;
        height: 40px;
        background: #fff;
        border: 1px solid #cacaca;
        padding-top: 4px;
        padding-left: 10px;
        position: relative;

        .left-p {
            position: absolute;
            right: 5px;
            top: 4px;

            .el-icon-search {
                color: #fff;
            }
        }

        & /deep/ .el-button {
            padding: 6px;
        }
    }

    .left-tree {
        /* width: 220px; */
        height: calc(100vh - 78px);
        overflow: scroll;
    }
}
</style>
